<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>08 - stateless default property</title>
</head>
<body>
<div id="react-container"></div>

<script src="https://unpkg.com/prop-types/prop-types.js"></script>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

<script type="text/babel">

    const { Component } = React
    const { render } = ReactDOM

    const AddColorForm = ({onNewColor}) => {

        let _title, _color

        const submit = e => {
            e.preventDefault()
            onNewColor(_title.value, _color.value)
            _title.value = ''
            _color.value = '#000000'
            _title.focus()
        }

        return (
            <form onSubmit={submit}>
                <input ref={input => _title = input}
                       type="text"
                       placeholder="color title..." required/>
                <input ref={input => _color = input}
                       type="color" required/>
                <button>ADD</button>
            </form>
        )

    }

    AddColorForm.propTypes = {
        onNewColor: PropTypes.func
    }

    AddColorForm.defaultProps = {
        onNewColor: f=>f
    }

    render(
      <AddColorForm />,
      document.getElementById('react-container')
    )


</script>

</body>
</html>
